<template>
  <div class="main">
    <header v-show="visible">
      <figure>
        <img src="@/assets/logo.png" alt="公司logo">
        <figcaption>XXXX有限责任公司</figcaption>
      </figure>
    </header>
    <article>
      <div class="show-page-article-left">
        <ul>
          <li @click="change(1)">系统1</li>
          <li>系统2</li>
          <li>系统3</li>
          <li>系统4</li>
          <li>系统5</li>
        </ul>
      </div>
      <div class="show-page-article-center">
        <div class="center-swiper">
          <show-swiper :topImage="topImage"/>
        </div>
        <div class="center-bottom">
          <ul>
            <li>系统1</li>
            <li>系统2</li>
            <li>系统3</li>
          </ul>
        </div>
      </div>
      <div class="show-page-article-right">
        <ul>
          <li>系统1</li>
          <li>系统2</li>
          <li>系统3</li>
          <li>系统4</li>
          <li>系统5</li>
        </ul>
      </div>
    </article>
    <footer v-show="visible">
      <div class="links">
        <a href="/" target="_blank">帮助</a>
        <a href="/" target="_blank">隐私</a>
        <a href="/" target="_blank">条款</a>
      </div>
      <div class="copyright">
        Copyright &copy; 2021 xxx公司 出品
      </div>
    </footer>
    <div class="shelter" v-show="!visible">
        <div class="back"></div>
        <div class="card" :class="style" @click="change(1)">
          <img src="@/assets/cow/牛.jpeg" alt="">
          <div>
            <h3>肉牛养殖平台</h3>
            <p>智慧肉羊养殖云平台通过云计算大数据技术和动物智能穿藏产品,实现肉羊的养殖管理的信息化和智能化,适用于集中困养和牧区散养等多种养殖模式的羊群管理。主要的功能模块包括:羊群管理,繁育管理,疾病管理,饲喂管理,投入品管理,智能预警中心,大数据分析中心等。</p>
            <a-icon type="double-right"  class="icon" @click="login(1)"/>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import ShowSwiper from './childCom/ShowSwiper.vue';
import axios from 'axios'
export default {
  components: { ShowSwiper },
  name: "ShowPage",
  data () {
    return {
      visible: true,
      topImage:[],
      style: "",
      data:[],
      data1:[],
      data2: [
        {
          id: 1,
          title: "肉牛养殖系统",
          content: "基于云模式的肉牛养殖平台"
        },
        {
          id: 2,
          title: "title2",
          content: "content2"
        },
        {
          id: 3,
          title: "title3",
          content: "content3"
        },
        {
          id: 4,
          title: "title4",
          content: "content4"
        },
        {
          id: 5,
          title: "title5",
          content: "content5"
        },
        {
          id: 6,
          title: "title6",
          content: "content6"
        },
        {
          id: 7,
          title: "title7",
          content: "content7"
        },
        {
          id: 8,
          title: "title8",
          content: "content8"
        },
        {
          id: 9,
          title: "title9",
          content: "content9"
        },
        {
          id: 10,
          title: "title10",
          content: "content10"
        },
        {
          id: 11,
          title: "title11",
          content: "content11"
        },
        {
          id: 12,
          title: "title12",
          content: "content12"
        },
        {
          id: 13,
          title: "title13",
          content: "content13"
        }
      ]
    };
  },
  async created(){
    this.data = this.data2;
    this.topImage = (await axios.get('https://www.fastmock.site/mock/0287ee4356690e49574dbd9ee3568586/mymock_test/show/image')).data.data.swiperImage
    console.log(this.topImage)
  },
  methods: {
    change(val){
      if(val == 1){
        this.visible = !this.visible;
        if(this.visible){
          this.style = "";
          this.data = this.data2;
        }else{
          this.data = this.data1;
          this.style = "big";
        }
      }else{
        this.$message.info('敬请期待！');
      }
    },
    login(val){
      if(val == 1){
        this.$router.push({ path: "/user/login"})
      }else{
        this.$message.info('敬请期待！');
      }
     
    }
  }
}
</script>
<style lang="less" scoped>
  // @screen_width: document.body.clientWidth;

  html, body{
    padding: 0;
    margin: 0;
  }
  .main {
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    header {
      height: 50px;
      background: #ececec;
      figure {
        height: 100%;
        padding: 5px 0 5px 50px;
        display: flex;
        justify-content: flex-start;
        img {
          width: 40px;
          height: 40px;
          margin-right: 20px;
        }
        figcaption {
          font-size: 18px;
          font-weight: 500;
          font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
          margin-top: 5px;
        }
      }
    }
    article {
      height: calc(100% - 100px);
      overflow: hidden;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      .show-page-article-left {
        width: 20%;
        height: 100%;
        ul {
          height: 100%;
          list-style: none;
          li {
          width: 100%;
          height: 15%;
          padding-top: 12%;
          margin-top: 30px;
          border: 3px solid #000;
          border-radius: 50%;
          text-align: center;
          margin-left: -10px;
          }
        }
      }
      .show-page-article-center {
        flex: 1;
        .center-swiper {
          height: 83%;
          margin-bottom: 10px;
        }
        .center-bottom {
          width: 100%;
          height: 15%;
          ul{
            height: 100%;
            list-style: none;
            display: flex;
            justify-content: space-between;
            li{
              display: inline-block;
              width: 31%;
              border: 3px solid #000;
              height: 100%;
              text-align: center;
              border-radius: 50%;
              height: 100%;
              padding-top: 3%;
            }
          }
        }
      }
      .show-page-article-right {
        width: 20%;
        height: 100%;
        ul {
          height: 100%;
          list-style: none;
          li {
          width: 100%;
          height: 15%;
          padding-top: 12%;
          margin-top: 30px;
          border: 3px solid #000;
          border-radius: 50%;
          text-align: center;
          margin-right: -10px;
          }
        }
      }
    }
    footer {
      position: fixed;
      width: 100%;
      bottom: 0;
      padding: 0 16px;
      margin: 48px 0 24px;
      margin-bottom: 0;
      text-align: center;
      background: #ececec;
      // opacity: 50%;

      .links {
        margin-bottom: 8px;
        font-size: 14px;
        a {
          color: rgba(0, 0, 0, 0.45);
          transition: all 0.3s;
          &:not(:last-child) {
            margin-right: 40px;
          }
        }
      }
      .copyright {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
    }
    .shelter {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        .back {
          background: #ececec;
          width: 100%;
          height: 100%;
          z-index: 500;
        }
        .card {
          width: 60%;
          height: 60%;
          z-index: 1000;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 40%;
            height: 100%;
            min-width: 280px;
            min-height: 400px;
          }
          div{
            min-width: 280px;
            min-height: 400px;
            width: 40%;
            height: 100%;
            background: #fff;
            position: relative;
            h3 {
              position: absolute;
              left: 35%;
            }
            p{
              position: absolute;
              margin: auto;
              padding: 0 20px;
              left: 0;
              right: 0;
              top: 50px;
            }
            .icon {
              position: absolute;
              left: 80%;
              top: 80%;
              font-size: 30px;
            }
          }
        }
      }
      .big{
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1000;
        animation: 3s rainbow forwards;
      }
      @keyframes rainbow {
        0% {
          transform: scale(0.5,0.5);
        }
        100% { 
          transform: scale(1,1);
        }
      }
  }
</style>